<template>
  <div class="test">
    <div id="atable" style="width: 1200px; height: 800px"></div>
    <div id="btable" style="width: 1200px; height: 800px"></div>
  </div>
</template>

<script>
import axios from "axios";
import * as echarts from "echarts";

var thedata = [];
console.log('data has been set');
// axios({
//     url:'/apib'
// }).then(res => {
// console.log(res);
// var dataitem=res["data"];
// for (var i=0;i<dataitem.length;i++){
//     var item = {"deny":Number(dataitem[i].deny),"denyTimes":Number(dataitem[i].denyTimes),"title":dataitem[i].title};
//     var itemB = [dataitem[i].title,Number(dataitem[i].deny),Number(dataitem[i].denyTimes)];
//     thedata.push(item);
// }
// console.log(thedata,'数据',typeof thedata);
// })

const requireA = axios.create({
  baseURL: 'http://127.0.0.1:8080'
});
requireA({
  url:'/apib'
}).then((res) => {
  console.log(res);
  var dataitem = res["data"];
  for (var i = 0; i < dataitem.length; i++) {
    var item = {
      deny: Number(dataitem[i].deny),
      denyTimes: Number(dataitem[i].denyTimes),
      title: dataitem[i].title,
    };
    var itemB = [
      dataitem[i].title,
      Number(dataitem[i].deny),
      Number(dataitem[i].denyTimes),
    ];
    thedata.push(item);
  };
  console.log(thedata, "数据", typeof thedata);
});


export default {
  name: "Echartstwo",
  /*
  beforeCreate() {
    axios({
      url: "/apib",
    }).then((res) => {
      console.log(res);
      var dataitem = res["data"];
      for (var i = 0; i < dataitem.length; i++) {
        var item = {
          deny: Number(dataitem[i].deny),
          denyTimes: Number(dataitem[i].denyTimes),
          title: dataitem[i].title,
        };
        var itemB = [
          dataitem[i].title,
          Number(dataitem[i].deny),
          Number(dataitem[i].denyTimes),
        ];
        thedata.push(item);
      };
      console.log(thedata, "数据", typeof thedata);
    });
  },
*/
  methods: {
    myEchartstwo() {
      
      var chart = echarts.init(document.getElementById("atable"));

      console.log(thedata, "检验", typeof thedata);
      var option = {
        title: { text: "双柱图", top: "3%", left: "center" },
        legend: {},
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          position: function (pos, params, el, elRect, size) {
            var obj = { top: 10 };
            obj[["left", "right"][+(pos[0] < size.viewSize[0] / 2)]] = 30;
            return obj;
          },
          extraCssText: "width: 170px",
        },
        dataset: {
          source: thedata
          // dimensions: ["title", "deny", "denyTimes"],
        },
        xAxis: {
          type: "category",
          name: "title",
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            type: "bar",
            name: "deny",
          },
          {
            type: "bar",
            name: "denyTimes",
          },
        ],
      };
      setTimeout(function (){
        chart.setOption(option);
      } ,2000);
      
      console.log('setOption');
    },
    
    myEchartsC() {
      var mCharts = echarts.init(
        document.getElementById("btable")
      ); /*实例化为mCharts*/
      const hours = [/*小时数据系列*/ "12a", "1a", "2a"];
      const days = [/*日期系列*/ "Saturday", "Friday"];
      var data = [
        [0, 0, 5],
        [0, 1, 1],
        [2, 1, 3],
        [1, 0, 2],
        [1, 1, 1],
      ]; /*纵轴类目数,横轴项目数,热力值 */
      //     .map(function (item) {
      // 		console.log(item) /*控制台打印item*/
      //     return [item[1], item[0], item[2] || '-'];
      // })
      option = {
        xAxis: {
          type: "category",
          data: hours,
        },
        yAxis: {
          type: "category",
          data: days,
        },
        visualMap: {
          min: 0,
          max: 10,
          // calculable: true,
          left: "center" /*居中*/,
          orient: "horizontal" /**/,
          bottom: "-10",
        },
        series: {
          name: "Punch Card",
          type: "heatmap",
          data: data,
          label: {
            show: true,
          },
        },
      };
      mCharts.setOption(option);
    },
  },

  
  mounted() {
    
    //   let a = document.getElementById('atable')
    //   let b = a.parentNode.parentNode
    //   a.style.width = b.offsetWidth -118 + 'px'
    //   a.style.height = b.offsetHeight - 15 + 'px'
    
    this.myEchartstwo();
    this.myEchartsC();
  },
};
</script>
